<template>
  <div style="height:100%">

     <!-- 查询条件 -->
    <div class="query">
    <el-form :model="form" inline size="small">
        <!--创建时间 日期范围控件 -->
        <el-form-item>
            <el-date-picker style="width: 200px" v-model="form.create_time" type="daterange" start-placeholder="开始日期"
                end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </el-form-item>

        

        

        

        <!--角色名称 输入控件 -->
        <el-form-item>
            <el-input clearable style="width: 120px" v-model="form.name" maxlength="64"
                placeholder="角色名称" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :icon="Search" @click="onQuery">查询</el-button>
            <el-button type="success" :icon="Search" @click="showAdd">添加</el-button>
        </el-form-item>
    </el-form>
</div>


    <!-- 列表 -->
    
<div class="list">
    <el-table :data="dataList" v-loading="conf.loading" stripe style="width: 100%;height:calc(100vh - 160px)" size="small" empty-text="无数据"
    ><el-table-column width="24px" type="expand">
    <template #default="view">
        <el-row :gutter="24">
            <el-col :span="5" class="text-right" style="height: 26px">角色编号:</el-col>
            <el-col :span="7" v-text="view.row.role_id" style="height: 26px"></el-col>
            <el-col :span="5" class="text-right" style="height: 26px">角色名称:</el-col>
            <el-col :span="7" v-text="view.row.name" style="height: 26px"></el-col>
            <el-col :span="5" class="text-right" style="height: 26px">状态:</el-col>
            <el-col :span="7" v-text="view.row.status_label" style="height: 26px"
                :class="'colorful'==''?'':colorful(view.row.status)"></el-col>
            <el-col :span="5" class="text-right" style="height: 26px">创建时间:</el-col>
            <el-col :span="7" v-text="view.row.create_time" style="height: 26px"></el-col>
        </el-row>
    </template>
</el-table-column>
        <el-table-column prop="role_id" align="center" label="角色编号" />
        <el-table-column prop="name" align="center" label="角色名称" />
        <el-table-column align="center" label="状态">
            <template #default="scope">
                <el-switch disabled v-model="scope.row.status_switch" />
            </template>
        </el-table-column>
        <el-table-column prop="create_time" align="center" label="创建时间" />
        

<el-table-column fixed="right" label="操作" width="120">

    <template #default="scope"><el-button size="small" type="text" @click="show_cmpnt_aal(scope.row)">授权</el-button>
        <el-button size="small" type="text" @click="showEdit(scope.row)">修改</el-button>
        <el-button size="small" type="text" @click="show_confirm_aan(scope.row)">删除</el-button></template>
</el-table-column>
        
    </el-table>
    <el-pagination :currentPage="form.pi" :page-size="form.ps" style="position: absolute; right: 30px;bottom:10px;"
        :page-sizes="[10, 20, 50, 100]" :background="false" small layout="total,sizes,prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
    <CAdd ref="cadd" @onsaved="onQuery"></CAdd>
    <CEdit ref="cedit" @onsaved="onQuery"></CEdit>
    <CView ref="cview" @onsaved="onQuery"></CView>
    <DLGOpts ref="dlgOpts" @onsaved="onQuery"></DLGOpts>
  <DLGCnfrm ref="dlgCnfrm"  @onsaved="onQuery"></DLGCnfrm>

    <aal ref="cmpnt_aal"  @onsaved="onQuery"></aal>
   
  </div>
</template>


<script>
import CAdd from "./role_info.add"
import CEdit from "./role_info.edit"
import CView from "./role_info.view"
import DLGOpts from "./role_info.opts.vue"
import DLGCnfrm from "./role_info.cnfrm.vue"

  import aal from "./role_info.grant"
export default {
   components: {
		CAdd,
    CEdit,
    CView,
    DLGOpts,
    DLGCnfrm,
    aal,
  },
  data() {
    return {
      conf:{
        loading:false,
        progressColor: this.$theia.env.conf.progress||[]
      },
    form: {
        pi: 1,
        ps: 10,
        name:"",
        status:"",
        create_time:"",
        },
    statusList:this.$theia.enum.get("status"),
    statusExts:this.$theia.enum.getExts("status"),
    dataList:[],
    total:0,};
  },
    created() {
      this.queryData()
    },
  methods:{
    queryData(){

      //构建查询参数
      let that = this
       this.form.start_create_time = null
      this.form.end_create_time = null
      if(this.form.create_time&& this.form.create_time.length>1){
        this.form.start_create_time=this.form.create_time[0]
        this.form.end_create_time=this.form.create_time[1]
      }
        //发送查询请求
      this.conf.loading = true
      this.$theia.http.get("/roleinfo/query",this.form).then(res=>{
        that.conf.loading = false
        that.dataList = res.items
        that.total = res.count
        that.dataList.forEach(item => {
           item.create_time = that.$theia.str.dateFormat(item.create_time,'yyyy-MM-dd HH:mm')
          item.status_label = that.$theia.enum.getName("status",item.status)
          item.status_switch = item.status == 0
        });
      })
    },
    handleSizeChange(ps){
      this.form.ps = ps
      this.queryData()
    },
    handleCurrentChange(pi){
      this.form.pi = pi
      this.queryData()
    },
    onQuery(){
      this.form.pi = 1
      this.queryData()
    },
    showAdd(){
       this.$refs.cadd.show()
    },
     showView(q){ 
       this.$refs.cview.show(q)
    },
    showEdit(q){
        this.$refs.cedit.show(q)
      },
    colorful(r){
       return this.$theia.env.conf.colorful[r]
    },
     goto(url,param){
       if (!url) {
        return;
      }
      if (!url.indexOf("://")) {
        this.$router.push({ path: url, query: param });
        return;
      }
      let p = this.$theia.url.encode(param)
      window.location =`${url}?${p}`
    },
    
    
show_cmpnt_aal(fm){
  let query={} 
  query.role_id = fm.role_id 
  query.name = fm.name
  this.$refs.cmpnt_aal.show(query)
},show_confirm_aan(fm){
  this.$refs.dlgCnfrm.show_aan(fm)
},


  },
};
</script>
<style>
.el-form-item {
  margin-right: 10px !important;
}
</style>